"""
@author: Gaoyaoxia
@date: 2021-03-09 15:15:42
"""
<!-- 委员履职详情 -->
<template>
  <div class="box">
    <div class="lvzda-bg">
      <div class="lvzda-header">
        <div class="lvzda-head">
          <div class="lvzda-logo">年度履职报告</div>
          <div class="lvzda-select">
            <s-select
              :selectOption="years"
              v-model="strYear"
              style="width: 100px"
            ></s-select>
          </div>
        </div>
      </div>
      <div class="lvzda-container">
        <div class="cont-top clear">
          <div class="top-left">
            <span class="avatar"
              ><img src="assets/images/member/default.png"
            /></span>
            <div class="info">
              <h2>李菲菲</h2>
              <p>
                合肥市农业委员会调研员，九三学社合肥市委副主委
                <br />
                中国国民党革命委员会
                <br />
                中国共产党
              </p>
            </div>
          </div>
          <ul class="top-right">
            <li class="orange">
              <b>0.0</b>
              <p>履职得分情况</p>
            </li>
            <li class="blue">
              <b>4</b>
              <p>综合排名(共11)</p>
            </li>
          </ul>
          <!-- 锚点链接 -->
          <!-- <a-affix :offset-top="184">
            <div id="anchorPoint" class="right-content">
              <ul>
                <li
                  v-for="(item, index) in navList"
                  :class="{ active: activeIndex == index }"
                  :key="index"
                  @click="jump(index)"
                >
                  <a class="nav-item">
                    <i class="icon suncnui suncnui-icon-yuan"></i>
                    <p>{{ item.label }}</p>
                  </a>
                </li>
              </ul>
            </div>
          </a-affix> -->
          <Saffix
            :offsetTop="184"
            className="lvzda-item"
            :navList="navList"
            :activeIndex="activeIndex"
          ></Saffix>
        </div>
        <div id="div0" name="div0" class="lvzda-item">
          <div class="lvzda-title">
            <span class="small">履职状况</span>
          </div>
          <div class="lvzzk-big-list clear">
            <dd>
              <div class="spacing">
                <ul class="lvzzk-list clear">
                  <li
                    v-for="(item, index) in lvzzkList"
                    :key="item.label"
                    :class="index < 3 ? 'blue' : 'yellow'"
                  >
                    <span>
                      <b>{{ item.value }}</b
                      >{{
                        item.label == '政协提案' || item.label == '社情民意'
                          ? '件'
                          : '次'
                      }}
                    </span>
                    <p>{{ item.label }}</p>
                  </li>
                </ul>
              </div>
            </dd>
            <dd>
              <div class="spacing">
                <div class="chart">
                  <radar :data="echartData"></radar>
                </div>
                <div class="lvzzk-radar-txt">
                  <fieldset>
                    <legend>各项得分</legend>
                    <ul>
                      <li v-for="item in echartData" :key="item.name">
                        <span>{{ item.value }}</span>
                        <p>{{ item.name }}</p>
                      </li>
                    </ul>
                  </fieldset>
                </div>
              </div>
            </dd>
          </div>
        </div>
        <div id="div1" name="div1" class="lvzda-item">
          <div class="lvzda-title">
            <span class="small">提案方面</span>
            <div @click="showMore" v-if="proposalData.length > 2">
              <a v-if="!isShowMore"
                ><i class="suncnui suncnui-icon-fenzu1"></i>更多</a
              >
              <a v-else><i class="suncnui suncnui-icon-fenzu1"></i>收起</a>
            </div>
          </div>
          <div v-if="proposalData.length > 0" class="lvzda-list">
            <div
              v-for="item in socialData"
              :key="item.id"
              class="lvzda-list-item"
            >
              <h3>{{ item.title }}</h3>
              <span>{{ item.type }}</span> <span>{{ item.date }}</span>
              <ul>
                <li style="background: #f1f8fe; color: #1370d7">
                  {{ item.status1 }}
                </li>
                <li style="background: #f1f8fe; color: #1370d7">
                  {{ item.status2 }}
                </li>
                <li style="background: #f1f8fe; color: #1370d7">
                  {{ item.status3 }}
                </li>
              </ul>
            </div>
          </div>
          <div class="suncnui-no-data" v-else>
            <img :src="require('assets/images/member/none.png')" />
          </div>
        </div>
        <div id="div2" name="div2" class="lvzda-item">
          <div class="lvzda-title">
            <span>社情民意方面</span>
            <div @click="showMore" v-if="socialData.length > 2">
              <a v-if="!isShowMore"
                ><i class="suncnui suncnui-icon-fenzu1"></i>更多</a
              >
              <a v-else><i class="suncnui suncnui-icon-fenzu1"></i>收起</a>
            </div>
          </div>
          <div v-if="socialList.length > 0" class="lvzda-list">
            <div
              v-for="item in socialList"
              :key="item.id"
              class="lvzda-list-item"
            >
              <h3>{{ item.title }}</h3>
              <span>{{ item.type }}</span> <span>{{ item.date }}</span>
              <ul>
                <li style="background: #f1f8fe; color: #1370d7">
                  {{ item.status1 }}
                </li>
                <li style="background: #f1f8fe; color: #1370d7">
                  {{ item.status2 }}
                </li>
                <li style="background: #f1f8fe; color: #1370d7">
                  {{ item.status3 }}
                </li>
              </ul>
            </div>
          </div>
          <div class="suncnui-no-data" v-else>
            <img :src="require('assets/images/member/none.png')" />
          </div>
        </div>
        <div id="div3" name="div3" class="lvzda-item">
          <div class="lvzda-title">
            <span>会议参与情况</span>
            <div @click="showMore" v-if="meetingData.length > 2">
              <a v-if="!isShowMore"
                ><i class="suncnui suncnui-icon-fenzu1"></i>更多</a
              >
              <a v-else><i class="suncnui suncnui-icon-fenzu1"></i>收起</a>
            </div>
          </div>
          <div v-if="meetingData.length > 0" class="lvzda-list">
            <div
              v-for="item in socialData"
              :key="item.id"
              class="lvzda-list-item"
            >
              <h3>{{ item.title }}</h3>
              <span>{{ item.type }}</span> <span>{{ item.date }}</span>
              <ul>
                <li style="background: #f1f8fe; color: #1370d7">
                  {{ item.status1 }}
                </li>
                <li style="background: #f1f8fe; color: #1370d7">
                  {{ item.status2 }}
                </li>
                <li style="background: #f1f8fe; color: #1370d7">
                  {{ item.status3 }}
                </li>
              </ul>
            </div>
          </div>
          <div class="suncnui-no-data" v-else>
            <img :src="require('assets/images/member/none.png')" />
          </div>
        </div>
        <div id="div4" name="div4" class="lvzda-item">
          <div class="lvzda-title">
            <span>活动参与情况</span>
            <div @click="showMore" v-if="eventData.length > 2">
              <a v-if="!isShowMore"
                ><i class="suncnui suncnui-icon-fenzu1"></i>更多</a
              >
              <a v-else><i class="suncnui suncnui-icon-fenzu1"></i>收起</a>
            </div>
          </div>
          <div v-if="eventData.length > 0" class="lvzda-list">
            <div
              v-for="item in socialData"
              :key="item.id"
              class="lvzda-list-item"
            >
              <h3>{{ item.title }}</h3>
              <span>{{ item.type }}</span> <span>{{ item.date }}</span>
              <ul>
                <li style="background: #f1f8fe; color: #1370d7">
                  {{ item.status1 }}
                </li>
                <li style="background: #f1f8fe; color: #1370d7">
                  {{ item.status2 }}
                </li>
                <li style="background: #f1f8fe; color: #1370d7">
                  {{ item.status3 }}
                </li>
              </ul>
            </div>
          </div>
          <div class="suncnui-no-data" v-else>
            <img :src="require('assets/images/member/none.png')" />
          </div>
        </div>
        <div id="div5" name="div5" class="lvzda-item">
          <div class="lvzda-title">
            <span>大会发言参与情况</span>
            <div @click="showMore" v-if="speakingData.length > 2">
              <a v-if="!isShowMore"
                ><i class="suncnui suncnui-icon-fenzu1"></i>更多</a
              >
              <a v-else><i class="suncnui suncnui-icon-fenzu1"></i>收起</a>
            </div>
          </div>
          <div v-if="speakingData.length > 0" class="lvzda-list">
            <div
              v-for="item in socialData"
              :key="item.id"
              class="lvzda-list-item"
            >
              <h3>{{ item.title }}</h3>
              <span>{{ item.type }}</span> <span>{{ item.date }}</span>
              <ul>
                <li style="background: #f1f8fe; color: #1370d7">
                  {{ item.status1 }}
                </li>
                <li style="background: #f1f8fe; color: #1370d7">
                  {{ item.status2 }}
                </li>
                <li style="background: #f1f8fe; color: #1370d7">
                  {{ item.status3 }}
                </li>
              </ul>
            </div>
          </div>
          <div class="suncnui-no-data" v-else>
            <img :src="require('assets/images/member/none.png')" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Radar from 'components/base/radarChart.vue'
import Saffix from 'components/base/sAffix.vue'
export default {
  components: { Radar, Saffix },
  data() {
    return {
      isShowMore: false,
      years: [
        { key: '2021', label: '2021' },
        { key: '2020', label: '2020' }
      ],
      strYear: '2021',
      activeIndex: 0,
      navList: [
        { key: 1, label: '履职状况' },
        { key: 2, label: '提案方面' },
        { key: 3, label: '社情民意方面' },
        { key: 4, label: '会议参与情况' },
        { key: 5, label: '活动参与情况' },
        { key: 6, label: '大会发言情况' }
      ],
      lvzzkList: [
        { label: '政协提案', value: 0 },
        { label: '全会', value: 0 },
        { label: '普通会议', value: 0 },
        { label: '社情民意', value: 0 },
        { label: '活动', value: 0 },
        { label: '会议发言', value: 0 }
      ],
      echartData: [
        { name: '活动', value: '0.0', max: 100 },
        { name: '会议', value: '0.0', max: 100 },
        { name: '社情民意', value: '0.0', max: 100 },
        { name: '提案', value: '0.0', max: 100 },
        { name: '会议发言', value: '0.0', max: 100 },
        { name: '其他', value: '0.0', max: 100 }
      ],
      scroll: '',
      proposalData: [],
      socialData: [
        {
          id: 1,
          title: '关于建设交通违法本异地一站式缴费系统的建议',
          type: '个人提案',
          date: '2020-04-01',
          status1: '采用',
          status2: '已采编',
          status3: '办理中'
        },
        {
          id: 2,
          title: '关于建设交通违法本异地一站式缴费系统的建议',
          type: '个人提案',
          date: '2020-04-01',
          status1: '采用',
          status2: '已采编',
          status3: '办理中'
        },
        {
          id: 3,
          title: '关于建设交通违法本异地一站式缴费系统的建议',
          type: '个人提案',
          date: '2020-04-01',
          status1: '采用',
          status2: '已采编',
          status3: '办理中'
        }
      ],
      socialList: [],
      meetingData: [],
      meetingList: [],
      eventData: [],
      eventList: [],
      speakingData: [],
      speakingList: []
    }
  },
  computed: {},
  watch: {
    scroll: function () {
      this.loadSroll()
    }
  },
  mounted() {
    window.addEventListener('scroll', this.dataScroll)
    this.getDetail()
  },
  methods: {
    //获取信息
    getDetail() {
      this.socialList = this.socialData.slice(0, 2)
    },
    //===监听滚动条高度开始===
    dataScroll() {
      this.scroll =
        document.documentElement.scrollTop || document.body.scrollTop
    },
    //监听滚动距离
    loadSroll() {
      var self = this
      var sections = document.getElementsByClassName('lvzda-item')

      for (var i = sections.length - 1; i >= 0; i--) {
        if (self.scroll >= sections[i].offsetTop - 100) {
          this.activeIndex = i
          break
        }
      }
    },
    showMore() {
      this.isShowMore = !this.isShowMore
      if (this.isShowMore) {
        this.socialList = this.socialData
      } else {
        this.socialList = this.socialData.slice(0, 2)
      }
    }
  },
  created() {}
}
</script>
<style lang='less' scoped>
.box {
  overflow-y: auto;
  background: #f5f5f5;
}
.lvzda-bg {
  height: 100%;
}
.lvzda-header {
  background: url('../../../../assets/images/member/lvzda_head_bg.png')
    no-repeat center top;
  position: relative;
  z-index: 1;
  .lvzda-head {
    width: 1200px;
    margin: 0 auto;
    position: relative;
    height: 182px;
    .lvzda-logo {
      text-align: center;
      padding: 62px 0 0;
      font-size: 44px;
      font-weight: bold;
      color: #fff;
      text-shadow: 0 5px 0 #0f5496;
      height: 112px;
      box-sizing: border-box;
      overflow: hidden;
    }
    .lvzda-select {
      position: absolute;
      right: 19px;
      top: 13px;
      /deep/.ant-select-selection {
        background-color: rgba(255, 255, 255, 0.1);
        border: 1px solid #a0cdeb;
        height: 38px;
        border-radius: 4px;
        color: #fff;
      }
      /deep/.ant-select-selection__rendered {
        line-height: 38px;
      }
      /deep/.anticon {
        color: #fff;
      }
    }
  }
}
.lvzda-container {
  width: 1200px;
  margin: 0 auto;
  box-shadow: 0 0 10px #eaeaea;
  border-radius: 4px;
  background: #fff;
  box-sizing: border-box;
  margin-top: -25px;
  padding: 25px;
  margin-bottom: 25px;
  z-index: 0;
  // height: 100%;
}
.cont-top {
  position: relative;
  z-index: 10;
  .top-left {
    float: left;
    .avatar {
      float: left;
      padding: 7px;
      margin-top: -82px;
      background: rgba(255, 255, 255, 0.2);
      img {
        width: 144px;
        height: 203px;
        display: inline-block;
        border: none;
        vertical-align: middle;
      }
    }
    .info {
      margin-left: 180px;
      h2 {
        color: #333;
        font-size: 28px;
        margin: 10px 0 20px;
      }
      p {
        line-height: 22px;
        color: #666;
        font-size: 14px;
      }
    }
  }
  .top-right {
    float: right;
    margin: 5px 0 0;
    li {
      font-size: 14px;
      width: 146px;
      height: 121px;
      float: left;
      margin-left: 60px;
      list-style: none;
      b {
        font-size: 40px;
        display: block;
        width: 94px;
        height: 74px;
        line-height: 88px;
        margin: 21px 0 0 23px;
        text-align: center;
        font-weight: bold;
      }
      p {
        color: #fff;
        height: 26px;
        line-height: 26px;
        text-align: center;
        overflow: hidden;
      }
    }
    li.orange {
      background: url('../../../../assets/images/member/lvzda_df_bg.png')
        no-repeat;
      b {
        color: #ff7902;
      }
    }
    li.blue {
      background: url('../../../../assets/images/member/lvzda_pm_bg.png');
      b {
        color: #0b80f3;
      }
    }
  }
}
/deep/.right-content {
  position: absolute;
  right: -140px;
  width: 110px;
  height: 410px;
  top: 0;
}
.lvzda-item {
  margin: 40px 0 0;
}
.lvzda-title {
  height: 42px;
  line-height: 42px;
  border-bottom: 1px solid #d7e3ec;
  span {
    color: #fff;
    font-size: 18px;
    background: url('../../../../assets/images/member/lvzda_title_bg.png')
      no-repeat #fff;
    display: inline-block;
    width: 164px;
    text-align: center;
    line-height: 43px;
  }
  span.small {
    background: url('../../../../assets/images/member/lvzda_titleSmall_bg.png')
      no-repeat #fff;
    width: 126px;
  }
  div {
    float: right;
    display: block;
    a {
      color: rgb(116, 114, 114);
    }
    i {
      vertical-align: bottom;
      font-size: 30px;
    }
  }
}
.lvzzk-big-list {
  dd {
    float: left;
    width: 50%;
    margin: 20px 0 0;
    .spacing {
      height: 244px;
      background: #fff;
      border-radius: 4px;
      box-shadow: 0 0 10px #eaeaea;
      padding: 8px 12px;
      box-sizing: border-box;
      border: 1px solid #f1f1f1;
      margin: 0 10px;
      position: relative;
      .chart {
        width: 315px;
        height: 223px;
      }
      .lvzzk-radar-txt {
        height: 220px;
        width: 176px;
        position: absolute;
        right: 38px;
        top: 10px;
        fieldset {
          border: 1px solid #ececec;
          border-radius: 6px;
          height: 100%;
          box-sizing: border-box;
          padding: 0;
          box-shadow: 0 4px 0 #f5f5f5;
        }
        legend {
          width: auto;
          line-height: 20px;
          text-align: center;
          border: 1px solid #ececec;
          border-radius: 4px;
          padding: 1px 10px;
          color: #666;
          font-size: 14px;
        }
        ul {
          margin: 8px 11px 0;
        }
        li {
          height: 25px;
          line-height: 25px;
          background: #e9f4ff;
          font-size: 14px;
          color: #333;
          position: relative;
          margin-left: 15px;
          margin-bottom: 6px;
          ::before {
            left: -15px;
          }
          ::before,
          ::after {
            content: '';
            width: 5px;
            height: 100%;
            background: #e9f4ff;
            position: absolute;
            top: 0;
          }
          ::after {
            left: -8px;
          }
          span {
            float: right;
            color: #2a90f4;
            width: 45px;
          }
          p {
            padding-right: 55px;
            text-align: right;
          }
        }
      }
    }
  }
}
.lvzzk-list {
  margin-top: 6px;
  li {
    float: left;
    width: 136px;
    height: 86px;
    box-sizing: border-box;
    border-radius: 20px;
    margin: 10px 20px;
    color: #555;
    text-align: center;
    padding: 10px 0;
    list-style: none;
    span {
      color: #919191;
    }
    b {
      font-size: 30px;
      font-weight: normal;
    }
    p {
      margin-top: 10px;
    }
  }
  li.blue {
    b {
      color: #3fa0ff;
    }
    border: 1px solid #6cb6ff;
    box-shadow: 0 4px 0 #dfeeff;
  }
  li.yellow {
    b {
      color: #ff9f4a;
    }
    border: 1px solid #ffb676;
    box-shadow: 0 4px 0 #ffefe0;
  }
}
.lvzda-list {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.lvzda-list-item {
  position: relative;
  height: 146px;
  width: 50%;
  max-width: 555px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 10px #eaeaea;
  padding: 8px 12px;
  box-sizing: border-box;
  border: 1px solid #f1f1f1;
  margin: 20px 10px 0px 10px;
  padding: 24px;
  h3 {
    font-size: 20px;
  }
  span {
    font-size: 15px;
    display: inline-block;
    margin: 20px 60px 20px 0px;
  }
  ul li {
    float: left;
    font-size: 14px;
    line-height: 24px;
    color: #666666;
    border-radius: 2px;
    margin-right: 25px;
    height: 24px;
  }
  li {
    display: block;
    text-align: center;
    padding: 0px 10px;
    border-radius: 4px;
  }
}
.suncnui-no-data {
  text-align: center;
}
</style>